<!--
 * @FileDescription 填空标签
 * @Author lz
 * @Date 20230131 17:20:54
 * @LastEditors lz
 * @LastEditTime 20230131 17:20:54
-->
<template>
    <div class="lab_Box">
        <div class="upperRight" v-if="Direction == 45">
            <img src="/structure/origin.png" class="origin">
            <div class="box">
                <div class="tit">
                    {{ Name }}
                </div>
            </div>
            <img class="connection" src="/structure/instructions_bg.png">
        </div>

        <div class="lowerRight" v-if="Direction == 135">
            <img src="/structure/origin.png" class="origin">
            <div class="box_lowerRight">
                <div class="tit">
                    {{ Name }}
                </div>
            </div>
            <img class="connection_lowerRight" src="/structure/lowerRight_lab.png">
        </div>

        <div class="upperLeft" v-if="Direction == 225">
            <img src="/structure/origin.png" class="origin">
            <div class="box_upperLeft">
                <div class="tit">
                    {{ Name }}
                </div>
            </div>
            <img class="connection_upperLeft" src="/structure/upperLeft_lab.png">
        </div>

        <div class="lowerLeft" v-if="Direction == 315">
            <img src="/structure/origin.png" class="origin">
            <div class="box_lowerLeft">
                <div class="tit">
                    {{ Name }}
                </div>
            </div>
            <img class="connection_lowerLeft" src="/structure/instructions_bg.png">
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
const props = defineProps({
    Direction: Number,
    ViewportPointX: String,
    ViewportPointY: String,
    Name: String,
})
const state = reactive({

});
</script>

<style scoped>
.lab_Box {
    position: absolute;
    left: v-bind(ViewportPointX);
    top: v-bind(ViewportPointY);
    z-index: 999;
}

.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #426B9E;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Btn:hover {
    color: #fff;
    background-image: url('/structure/btn_bg_select.png');
}

.submit {
    left: 888px;
    bottom: 90px;
}

.box {
    position: absolute;
    left: 180px;
    top: -64px;
    min-width: 200px;
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
}

.box_lowerRight {
    position: absolute;
    left: 180px;
    top: 37px;
    min-width: 200px;
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
}

.box_upperLeft {
    position: absolute;
    left: -360px;
    top: -64px;
    height: 60px;
    min-width: 200px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
}

.box_lowerLeft {
    position: absolute;
    left: -360px;
    top: 37px;
    min-width: 200px;
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
}

.tit {
    width: 100%;
    margin-top: -8px;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    float: left;
    text-align: center;
}

.connection {
    position: absolute;
    left: 10px;
    top: -14px;
    width: 224px;
}

.connection_lowerRight {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 224px;
}

.connection_upperLeft {
    position: absolute;
    left: -206px;
    top: -14px;
    width: 224px;
}

.connection_lowerLeft {
    position: absolute;
    left: -206px;
    top: 12px;
    width: 224px;
    transform: rotate(180deg);
}

.origin {
    width: 34px;
}
</style>